효과적인 버튼 디자인 베스트 예제 | 매거진에 참여하세요

버튼은 액션을 위한 디자인에서 최우선 선택사항입니다.

이것이 버튼의 본래 목적이자 사용자가 기대하는 방식이기 때문입니다. 사용자 기대와 확립된 UI 디자인 패턴을 따르는 것이 효과적인 사용자 중심 제품을 만드는 최선의 방법입니다.

이 글에서는 성공적이고 사용하기 쉬운 인터페이스를 위한 4개 카테고리와 13가지 핵심 팩트를 살펴보겠습니다.

외형

사용자는 클릭 가능한 요소를 즉시 인지해야 합니다.

사용자는 무의식적으로 화면을 스캔하며 정보를 처리합니다.

디자인 선택을 통해 어떤 요소가 액션을 유발하는지 명확히 전달해야 합니다.

계층 구조, 색상, 형태 같은 기본 디자인 원칙만으로도 이 정보를 효과적으로 전달할 수 있습니다.

사용자는 당신의 제품을 사용하기 전에도 수많은 사이트와 앱을 경험했으며 자신이 원하는 것을 알고 있습니다.

1. 버튼은 버튼처럼 보이게 하라

1. 
   사용자는 버튼의 정체성을 알고 있습니다.

2. 지나치게 "창의적"이 되어 사용자가 인지하지 못할 이상한 형태로 디자인하지 마세요. 또한 링크는 버튼이 아닙니다(이에 대해서는 잠시 후 설명하겠습니다).

2. 주요 액션과 보조 액션을 시각적으로 구분하라

주요 액션은 사용자가 가장 일반적이거나 중요한 목표를 달성할 수 있는 동작입니다. 보조 액션은 상대적으로 중요도가 낮은 동작이죠.

주요 액션 버튼을 시각적으로 두드러지게 표현함으로써 사용자의 주의를 집중시켜야 합니다.

회원가입/로그인 디자인에서 회원가입 버튼이 항상 주요 액션으로 배치되는 이유입니다.

이미 계정이 있는 사용자는 자동 로그인될 가능성이 높고, 없는 사용자는 사이트에 익숙해질 기회를 주기 위함입니다.

3. 버튼과 링크는 다르다

3. 링크는 사용자에게 액션을 요구하지 않으며, 단지 다른 위치로 이동시키는 역할을 합니다.

4. 링크는 사이트 내부/외부 페이지 간 네비게이션에 주로 사용됩니다. 버튼을 링크 스타일로 디자인하거나 그 반대의 경우가 흔한 실수입니다.

4. 한 화면에 주요 액션 버튼은 하나만 배치하라

3. 사용자가 현재 작업에 집중할 수 있도록 하세요. 페이지에 여러 액션이 존재할 수 있지만,

4. 주요 액션은 반드시 하나여야 합니다. 사용자는 현재 페이지 컨텍스트를 바탕으로 단일 버튼의 기능을 예측합니다.

6. 예를 들어 계정 생성 폼을 작성할 때 페이지에서 가장 눈에 띄는 버튼이 '계정 생성' 기능을 수행할 것이라고 기대합니다.

일부 사이트는 이런 사용자 기대를 악용하기도 합니다. 회원탈퇴 방해 등이 대표적인 다크 패턴 사례죠.

아래 예시처럼 모든 버튼을 주요 액션 스타일로 디자인하면 사용자는 원하는 액션을 수행하기 위해 각 섹션을 꼼꼼히 읽어야만 합니다.

버튼 배치

버튼의 위치는 중요합니다. 사용자는 버튼이 어디에 위치할지 예상합니다. 그들은 다양한 사이트와 앱을 사용하며 특정 버튼 배치 패턴에 익숙해져 있기 때문이죠.

5. 작은 창에서는 주요 액션 버튼을 오른쪽 하단에 배치하라

우리의 뇌는 화면의 내용을 무의식적으로 스캔합니다. 작은 창에서는 가장 중요한 액션을 마지막(오른쪽 하단)에 배치하는 것이 가장 좋은 방법입니다.

이 스캐닝 패턴을 보면, 어떤 것이 더 쉬워 보이나요?

6. 전체 페이지 디자인에서는 주요 버튼을 왼쪽에 배치하라

브라우저 창이 크거나, 폼을 작성하기 위해 스크롤해야 하는 경우, 주요 버튼을 페이지의 마지막 콘텐츠 바로 아래에 배치하는 것이 좋습니다.

사용자의 주의가 자연스럽게 그곳에 집중되기 때문입니다.

버튼 문구

버튼에 사용되는 단어는 중요합니다. 버튼의 문구는 사용자가 클릭했을 때 어떤 액션이 실행될지 명확히 설명해야 합니다.

7. 문구는 간결하고 직관적이어야 한다

불필요한 설명은 사용자에게 혼란을 줄 수 있습니다.

오른쪽 대화 상자가 훨씬 이해하기 쉽죠. 지나친 정보는 오히려 실수나 주저함을 유발할 수 있습니다.

8. "확인" 같은 일반적인 명령어는 피하라

대신, 클릭한 버튼의 동작을 반영한 문구를 사용하세요.

예를 들어 Dropbox에서는 "새 파일 만들기" 버튼을 클릭한 후, 파일을 저장할 위치를 선택하면 "만들기" 버튼이 나타납니다.

이렇게 하면 사용자가 어떤 액션을 취하는지 명확히 알 수 있습니다.

9. 작업에 특화된 단어를 사용하라

액션의 맥락을 고려하세요.

• 장바구니에 상품을 추가한다면 → "장바구니에 추가"

• 블로그 글을 발행한다면 → "발행"

10. 혼동을 줄 수 있는 단어는 지양하라

예를 들어, 리스트에서 항목을 제거할 때 "삭제(Delete)" 대신 "제거(Remove)"를 사용하세요.

• "삭제"는 영구적으로 없어질 수 있다는 느낌을 주지만,

• "제거"는 리스트에서만 사라진다는 의미를 전달합니다.

11. 다음에 어떤 일이 일어날지 명확히 알려주라

Medium의 예를 살펴보겠습니다. 블로그 글을 작성할 때 "Ready to publish?" 버튼은 새로운 사용자에게 혼란을 줍니다.

"이 버튼을 클릭하면 정말 글이 바로 발행될까?" 😰

실제로 클릭해보니, 글을 발행하기 전 추가 정보를 입력하는 페이지로 이동했습니다.
"작성 완료?" 또는 "저장하고 계속하기" 같은 문구가 더 명확했을 것입니다.

→ 경험 많은 사용자에게는 대화체가 친숙할 수 있지만, 신규 사용자에게는 불확실함을 줄 수 있습니다.

파괴적 액션(Destructive Actions)의 디자인

파괴적 액션(계정 삭제, 데이터 영구 삭제 등)은 결과가 치명적이기 때문에 버튼 디자인에서 별도의 주의가 필요합니다.

일반적인 액션과 달리, 사용자가 신중하게 생각할 수 있도록 의도적인 마찰(friction)을 추가해야 합니다.

12. 중요한 작업을 실행할 때는 사용자의 주의를 집중시켜라

• 작은 창이나 대화 상자를 사용해 사용자가 클릭 시 어떤 일이 발생할지 명확히 이해할 수 있도록 하세요.

• 주요 액션 버튼에 명확한 문구(ex. "계정 삭제")를 표시해 혼란을 방지합니다.

프로젝트 삭제는 중요한 작업이므로, 사용자에게 직접 "DELETE"라는 단어를 입력하도록 요구합니다.
→ 이렇게 하면 사용자가 신중하게 결정할 시간을 갖고, 실수를 방지할 수 있습니다.

13. 실수로 인한 조작을 복구할 수 있게 하라

"DELETE" 입력과 같은 추가 확인 단계를 적용하기 어렵다면, 삭제 후 "실행 취소(Undo)" 옵션을 제공하세요.

• 예: Gmail은 메일 삭제 후 "실행 취소" 팝업을 표시합니다.

• 이 간단한 기능이 사용자의 성급한 실수를 막아줍니다.

핵심 원칙

• 확인 강제: 사용자가 의도한 액션인지 재확인시킵니다.

• 탈출구 제공: 실수 시 되돌릴 수 있는 방법을 마련하세요.

💡 "사용자의 실수는 디자인의 실수다"
파괴적 액션은 되돌리기 어렵기 때문에, 디자이너는 사용자가 후회하지 않도록 보호장치를 설계해야 합니다.

위의 글은 원문을 번역 및 재가공한 결과입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/button-design-best-practices/